<template>
  <div id="addRepair" class="same-change-oldstyle">
    <div class="">
      <!-- <div class="topBreadcrumb">
        <span>当前位置：</span>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>员工管理</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/repairMange' }">维修员管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{ (pageType == 1 && '添加维修员') || (pageType == 2 && '编辑维修员') || (pageType == 3 && '查看维修员') }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div> -->
	  <div class="same-head-box">
        <div class="saem-seat-box">
          <div class="saem-seat-left">
            <span>当前位置：</span>
            <el-breadcrumb separator-class="el-icon-arrow-right">
               <el-breadcrumb-item>员工管理</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path: '/repairMange' }">维修员管理</el-breadcrumb-item>
				<el-breadcrumb-item>{{ (pageType == 1 && '添加维修员') || (pageType == 2 && '编辑维修员') || (pageType == 3 && '查看维修员') }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="saem-seat-right">
            <button class="same-search-btns same-search-export" @click="RefreshFun" v-if="pageType==2 || pageType==3">刷新</button>
            <button class="same-search-btns" @click="returnBack">返回</button>
          </div>
        </div>
      </div>
      <div class="edit-box">
        <div class="edit-top-box">
            <img src="../../../static/images/oC-icon7.png" width="15px"/> 维修员信息 
        </div>
        <div class="edit-body-box">

          <div class="edit-list-box">
            <div class="label-box">选择加盟商</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                  <el-cascader size="medium" placeholder="请选择" v-model="stateChose" :options="stateList" :props="{ multiple: true }" :disabled="pageType == 3" clearable></el-cascader>
              </div>
              <i class="i-show" v-if="pageType == 1">*</i>
            </div>
          </div> 

          <div class="edit-list-box">
            <!-- <div class="label-box">名称</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                  <el-input type="text" name="full_name" :disabled="pageType == 3" v-model="full_name" placeholder="请输入维修员名称" maxlength="20"/>
              </div>
              <i class="i-show" v-if="pageType == 1">*</i>
            </div> -->
          </div>  
           
          <div class="edit-list-box">
            <div class="label-box">名称</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                  <el-input size="medium" type="text" name="full_name" :disabled="pageType == 3" v-model="full_name" placeholder="请输入维修员名称" maxlength="20"/>
              </div>
              <i class="i-show" v-if="pageType == 1">*</i>
            </div>
          </div>  

          <div class="edit-list-box">
            <div class="label-box">账号</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                  <el-input  size="medium" type="text" name="account" :disabled="pageType == 3"  v-model="account" placeholder="请输入维修员账号"/>
              </div>
              <i class="i-show" v-if="pageType == 1">*</i>
            </div>
          </div>   

          <div class="edit-list-box" v-if="pageType != 3" >
            <div class="label-box">密码设置</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                  <el-input size="medium" type="password" name="passwordsss" v-model="password" placeholder="请设置登录密码" />
              </div>
              <i class="i-show" v-if="pageType == 1">*</i>
            </div>
          </div>   

          <div class="edit-list-box" v-if="pageType != 3">
            <div class="label-box">密码确认</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                  <el-input size="medium" type="password" name="repeat_password" v-model="repeat_password" placeholder="请再次输入密码"/>
              </div>
              <i class="i-show" v-if="pageType == 1">*</i>
            </div>
          </div>   

          <div class="edit-list-box">
            <div class="label-box">手机号码</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                  <el-input size="medium" type="number" name="phone" maxlength="11" :disabled="pageType == 3" v-model="phone" placeholder="请输入手机号码"/>
              </div>
              <i class="i-show" v-if="pageType == 1">*</i>
            </div>
          </div>  

          <div class="edit-list-box">
            <div class="label-box">身份证号</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                  <el-input size="medium" type="text" name="idcard" maxlength="18" :disabled="pageType == 3" v-model="idcard"  placeholder="请输入身份证号"/>
              </div>
              <i class="i-show" v-if="pageType == 1">*</i>
            </div>
          </div>  

          <div class="edit-list-box">
            <div class="label-box">居住地址</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                  <el-select size="medium" v-model="province_id" placeholder="省份" @change="chooseProvince" style="width: 114px;" :disabled="pageType == 3">
                    <el-option v-for="item in Province" :key="item.id" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                  <el-select size="medium" v-model="city_id" placeholder="城市" @change="chooseCity" style="width: 114px;"  :disabled="pageType == 3">
                    <el-option v-for="item in City" :key="item.id" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                  <el-select size="medium" v-model="area_id" placeholder="区县" @change="chooseArea" style="width: 114px;" :disabled="pageType == 3">
                    <el-option v-for="item in Area" :key="item.id" :label="item.name" :value="item.id"></el-option>
                  </el-select>
              </div>
              <i class="i-show" v-if="pageType == 1">*</i>
            </div>
          </div> 

          <div class="edit-list-box">
            <div class="label-box">详细地址</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                   <el-input size="medium" type="text" name="address" v-model="address"  placeholder="请输入详细地址" :disabled="pageType == 3"/>
              </div>
              <i class="i-show" v-if="pageType == 1">*</i>
            </div>
          </div>  

           <div class="edit-list-box">
            <div class="label-box">特殊权限</div>
            <div class="edit-cont-box">
              <div class="edit-one">
                  <el-radio-group v-model="is_auth" size="medium" :disabled="pageType == 3" text-color="#2c5586">
                    <el-radio :label="0" size="medium" >普通</el-radio>
                    <el-radio :label="1" size="medium" >高级</el-radio>
                  </el-radio-group>
              </div>
              <i class="i-show" v-if="pageType == 1">*</i>
            </div>
          </div> 
        </div>  

         <!-- <button
          style="width: 120px;margin-left:50px"
          type="button"
          v-if="pageType != 3"
          class="subbtn"
          @click="submitPromoter()"
        >提交</button> -->
        <el-button size="medium" class="repair-submit-btn" type="primary" v-if="pageType != 3"  @click="submitPromoter()">提 交</el-button>
      </div>  
    </div>
  </div>
</template>

<script>
export default {
  name: "addRepair",
  data: function() {
    return {
      promoterData: [],
      is_auth: '', //特殊权限
      Province: [], //省市区
      City: [],
      Area: [],
      province_id: "", //选中的省市区
      province_name: "", //选中的省市区
      city_id: "",
      city_name: "",
      area_id: "",
      area_name: "",
      full_name: "",
      account: "",
      password: "",
      repeat_password: "",
      phone: "",
      idcard: "",
      address: "",
      pageType: 1, //页面类型 2编辑 3查看  1添加
      stateList: [], //获取合伙人账号下所有加盟商表数据
      stateChose: [], //当前选中id  回显处理
      superior_id: 0, //1合伙人  3是加盟商
      promoterId: "", //当前的id
      statusIndex: 1,
      options: [
        {
          value: 1,
          label: "正常"
        },
        {
          value: 2,
          label: "冻结"
        }
      ]
    };
  },
  // 初始化运行
  created: function() {
    this.getProvince();
    this.getPartnerInfo();
    const { id, type } = this.$route.query;
    if (id > 0) {
      this.promoterId = id;
      this.pageType = type;
      console.log("??????", id, type);
      this.getDetails();
    }
  },

  inject: ["reload"],
  methods: {
    RefreshFun() {
      // 调用reload方法，刷新整个页面
      this.reload();
    },
    //返回
    returnBack() {
      this.$router.back(-1);
    },
    getPartnerInfo() {
      var that = this;
      that.$post({
        url: "Partner/User/getPartnerInfo",
        success: data => {
          if (data.code == 200) {
            that.superior_id = data.data.superior_id == 0 ? 1 : 3;
          }
          if (data.data.superior_id == 0) {
            that.allFranchiser(); // 获取合伙人账号下所有加盟商表数据 只有是合伙人的时候才能有选择合伙人(加盟商不需要选择);
          }
        }
      });
    },
    //获取合伙人账号下所有加盟商表数据  type1,包括合伙人在内，2不包括合伙人
    allFranchiser() {
      var that = this;
      that.$post({
        url: "Partner/EquipmentManagement/all_franchiser",
        data: {
          type: 1
        },
        success: data => {
          if (data.code == 1000) {
            var getData = data.data;
            getData.forEach(function(item, index) {
              item.value = item.id;
              item.label = item.account_name;
            });
            that.stateList = data.data;
            console.log("data", data);
          }
        }
      });
    },

    //三级联动-省
    getProvince() {
      this.$post({
        url: "Common/Common/getProvince",
        data: {},
        success: data => {
          this.Province = data.data;
        }
      });
    }, //三级联动-市
    getCity(id) {
      this.$post({
        url: "Common/Common/getCity",
        data: {
          id: id
        },
        success: data => {
          this.City = data.data;
        }
      });
    }, //三级联动-区/县
    getArea(id) {
      this.$post({
        url: "Common/Common/getArea",
        data: {
          id: id
        },
        success: data => {
          this.Area = data.data;
        }
      });
    },

    chooseProvince(val) {
      var that = this,
        Provinc_e = this.Province;
      this.getCity(val);
      Provinc_e.forEach(function(item, i) {
        if (item.id == val) {
          that.province_name = item.name;
        }
      });
      this.city_id = "";
      this.area_id = "";
    },
    chooseCity(val) {
      var that = this,
        Cit_y = this.City;
      this.getArea(val);
      this.area_id = "";
      Cit_y.forEach(function(item, i) {
        if (item.id == val) {
          that.city_name = item.name;
        }
      });
    },
    chooseArea(val) {
      var that = this,
        Are_a = this.Area;
      Are_a.forEach(function(item, i) {
        if (item.id == val) {
          that.area_name = item.name;
        }
      });
    },

    submitPromoter() {
      if (this.pageType == 3) {
        return;
      }
      let stateChose = this.stateChose;
      var franchiser = [];
      stateChose.forEach(function(item) {
        franchiser.push(Number(item[0]));
      });
      let full_name = this.full_name;
      let address = this.address;
      let account = this.account;
      let password = this.password;
      let repeat_password = this.repeat_password;
      let idcard = this.idcard;
      let phone = this.phone;
      let province_code = this.province_id;
      let province = this.province_name;
      let city_code = this.city_id;
      let city = this.city_name;
      let area_code = this.area_id;
      let area = this.area_name;
      let is_auth = this.is_auth;
      if (franchiser.length == 0 && this.superior_id == 0) {
        this.$message.error("请选择合伙人");
        return;
      }
      if (full_name === "") {
        this.$message.error("请输入维修员名称");
        return;
      }
      if (account === "") {
        this.$message.error("请输入维修员账户");
        return;
      }
      if (this.pageType == 1) {
        if (password === "") {
          this.$message.error("请设置登录密码");
          return;
        }
        if (repeat_password === "") {
          this.$message.error("请再次输入密码");
          return;
        }
      }
      if (password !== repeat_password) {
        this.$message.error("两次密码不一致");
        return;
      }
      if (phone === "") {
        this.$message.error("请输入手机号码");
        return;
      }
      if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(phone)) {
        this.$message.error("手机号码格式错误");
        return;
      }
      // if (idcard === '') {
      // 	this.$message.error('请输入身份证号');
      // 	return;
      // }

      if (province_code === "") {
        this.$message.error("请选择省份");
        return;
      }
      if (city_code === "") {
        this.$message.error("请选择城市");
        return;
      }
      if (area_code === "") {
        this.$message.error("请选择区县");
        return;
      }
      if (address === "") {
        this.$message.error("请输入详细地址");
        return;
      }
      if (is_auth == "") {
        this.$message.error("请选择特殊权限");
        return;
      }
      let data = {
        type: this.superior_id,
        franchiser,
        name: full_name,
        account,
        password,
        repeat_password,
        phone,
        idcard,
        province_code,
        city_code,
        area_code,
        province,
        city,
        area,
        address,
        is_auth
      };
      console.log("is_auth提交的数据", data);
      // return false;
      let url = "Partner/EquipmentManagement/add";
      if (this.pageType == 2) {
        Object.assign(data, {
          id: this.promoterId,
          is_auth: this.is_auth,
          state: this.statusIndex
        });
        url = "Partner/EquipmentManagement/edit";
      }
      this.$post({
        url,
        method: "POST",
        data,
        success: data => {
          if (data.code == 1000) {
            this.$message({
              type: "success",
              showClose: true,
              message: data.message,
              center: true
            });
            if (this.pageType == 1) {
              this.$router.push({ path: "/repairMange" });
            } else if (this.pageType == 2) {
              this.$router.go(-1);
            }
          } else {
            this.$message({
              type: "error",
              showClose: true,
              message: data.message,
              center: true
            });
          }
        }
      });
    },

    getDetails() {
      this.$post({
        url: "Partner/EquipmentManagement/detail",
        data: { id: this.promoterId },
        success: res => {
          if (res.code == 1000) {
            const source = res.data;
            const franchiser = source.franchiser;
            const getChose = [];
            franchiser.forEach(function(item, i) {
              getChose.push([item.id]);
            });
            this.stateChose = getChose;
            this.promoterData = source;
            this.full_name = source.name;
            this.account = source.account;
            this.phone = source.phone;
            this.idcard = source.idcard;
            this.province_id = source.province_code;
            this.province_name = source.province;
            this.getCity(source.province_code);
            this.city_id = source.city_code;
            this.city_name = source.city;
            this.getArea(source.city_code);
            this.area_id = source.area_code;
            this.area_name = source.area;
            this.address = source.address;
            this.is_auth = parseInt(source.is_auth);
            this.statusIndex = parseInt(source.state);
          } else {
            this.$message.error("获取维修员信息失败");
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.ml-20 {
  margin-left: 20px;
}

#addRepair .addRepairwrap {
  position: relative;
  padding: 0 42px;
}

#addRepair .el-input__suffix {
  right: -15px;
}

#addRepair .topBreadcrumb {
  font-size: 16px;
  display: flex;
  align-items: center;
  padding: 30px 0;
  border-bottom: 1px solid #cdcdcd;
}

#addRepair .topBreadcrumb .el-breadcrumb__inner {
  font-size: 16px;
  font-weight: normal;
}

#addRepair .items {
  font-size: 14px;
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}

#addRepair .items .el-input {
  flex: 1;
}

.el-cascader {
  flex: 1;
}

#addRepair .lable {
  width: 90px;
  font-weight: bold;
  font-size: 14px;
  text-align: right;
  margin-right: 20px;
}

#addRepair .formwrap {
  padding: 0 42px;
}

#addRepair .distance {
  margin: 10px 0;
}

#addRepair .items .icons {
  color:#FF6565;
  margin-left: 13px;
}

#addRepair .items input {
  border: 1px solid #cccccc;
  padding: 13px 9px;
  border-radius: 5px;
}

.other_box_show {
  display: flex;
  flex-direction: column;
}

.instructions {
  display: flex;
  flex-direction: column;
}

#addRepair .formwrap {
  margin-top: 30px;
}

#addRepair .formwrap .el-input__inner {
  border: 1px solid #cccccc;
  border-radius: 5px;
  height: 43px;
  font-size: 14px;
}

#addRepair .itemsbot .el-input__inner {
  border: 1px solid #cccccc;
  border-radius: 5px;
  height: 43px;
  font-size: 14px;
  width: 120px !important;
}

#addRepair .el-select {
  margin-right: 10px !important;
}

#addRepair .el-select:nth-of-type(3){
  margin-right: 0px !important;
}

#addRepair .itemsbot {
  display: flex;
  align-items: center;
}

#addRepair .itemsbot .el-input {
  width: 100px;
}

#addRepair .itemsbot select {
  border: 1px solid #cccccc;
  padding: 13px 9px;
  border-radius: 5px;
}

#addRepair .subbtn {
  width: 720px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #2c5586;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  padding: 0 !important;
  margin: 20px 0;
}

#addRepair .el-input__inner {
  height: 43px;
}

#addRepair .avatar-uploader {
  width: 400px;
  height: 260px;
}

#addRepair .el-upload--picture-card {
  width: 400px;
  height: 260px;
  background-color: #cccccc;
  line-height: 260px;
}

#addRepair .el-upload-list--picture-card .el-upload-list__item {
  width: 400px;
  height: 260px;
}

#addRepair .itemHead {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

#addRepair .itemPic {
  width: 210px;
  height: 130px;
  margin: 0 auto;
}

#addRepair .addIcon {
  width: 100%;
  height: 100%;
  display: inline-block;
  background: url(../../../static/images/addPic.png) center no-repeat no-repeat;
  position: relative;
  z-index: 9999;
}

#addRepair .picLeft {
  background: url(../../../static/images/card_z.png) center no-repeat no-repeat;
}

#addRepair .picRight {
  background: url(../../../static/images/card_f.png) center no-repeat no-repeat;
}

#addRepair .itemFooter {
  width: 100%;
  height: 80px;
  line-height: 80px;
  text-align: center;
}

#addRepair .item_box {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

#addRepair .Picbtn {
  width: 150px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid #060001;
  border-radius: 5px;
  background-color: #f19149;
  cursor: pointer;
  position: absolute;
  top: 150px;
  left: 30px;
}

#addRepair .avatar-uploader .el-upload {
  width: 400px !important;
  height: 260px !important;
  background: #cccdcd;
  cursor: pointer;
  position: relative;
  text-align: center;
  margin: 10px;
}

#addRepair .picList {
  width: 400px;
  height: 260px;
  margin: 10px;
  position: relative;
  opacity: 1;
  text-align: center;
  line-height: 260px;
  background: #cccdcd;
}

#addRepair .picList img {
  max-width: 400px;
  height: 100%;
}

#addRepair .mian-mask {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 260px;
}

#addRepair .removePic {
  color: #2c5586;
  font-size: 36px;
  cursor: pointer;
}

#addRepair .picList .el-loading-spinner {
  top: 0;
  margin-top: 0;
}

#addRepair .mr-20 {
  margin-right: 20px;
}

#addRepair .step-number {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  justify-items: center;
  align-items: center;
}

.w-450 {
  width: 450px;
}
</style>
<style>

#addRepair .topBreadcrumb {
  margin-left: 0;
}


#addRepair .edit-box{
  width: 100%;
  border-top: 20px solid #FAFAFA;
  padding-bottom: 22px;
}
#addRepair .edit-top-box{
  width: 100%;
  padding: 28px 30px;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 500;
  color: #2D5686;
}
#addRepair .edit-top-box img{
  width: 15px;
  margin-right: 10px;  
}
#addRepair .edit-body-box{
  width:1100px;
  padding: 0px 57px 0px 27px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}
#addRepair .edit-list-box{
  width: 50%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
#addRepair .label-box{
  width: 126px;
  margin-right: 10px;
  line-height: 40px;
  margin-left: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #4C4C4C;
  text-align: right;
  /* text-align: justify;
  text-align-last:justify;
  text-justify:distribute-all-lines; */
}
#addRepair .edit-cont-box{
  position: relative;
  margin-bottom: 20px;
  min-width:360px;
}
#addRepair .edit-cont-box .i-show{
  position: absolute;
  top: 10px;
  right: -15px;
  font-style: normal;
  color: #FF6565;
}
#addRepair .span-hint{
  position: absolute;
  bottom: -16px;
  left: 0px;
  font-size: 12px;
  font-weight: 400;
  color: #B3B3B3;
  width:400px;
}
#addRepair .edit-one{
  min-height: 40px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
#addRepair .edit-comit{
  position: relative;
  min-width: 20px;
  padding: 0 8px;
}
#addRepair .el-select {
  margin-right: 8px !important;
}

.ml-20 {
  margin-left: 20px;
}
.mr-20{
  margin-right: 10px;
}

</style>
<style scoped>
  .repair-submit-btn{
    margin-left: 110px;
  }
</style>